<template>
  <view class="merchant-container">
    <view class="form-container default-box-shadow">
      <u-form :model="userForm" ref="uForm" label-width="180">
        <!-- <u-form-item label="收款姓名" prop="real_name">
          <u-input v-model="userForm.real_name" placeholder="请输入您的收款姓名（必填）" />
        </u-form-item>
        <u-form-item label="支付宝账号" prop="payment_account">
          <u-input v-model="userForm.payment_account" placeholder="请输入您的提现账号（必填）" />
        </u-form-item>
        <u-form-item label="上传收款码" prop="payment_qrcode">
          <Upload
          ref="uUpload"
          :action="uploadParams.action"
          :header="{
            'Authorization': 'Bearer ' + token // token
          }"
          height="200"
          upload-text="支付宝"
          :limitType="uploadParams.limitType"
          :source-type="['album']"
          :max-count="uploadParams.maxCount"
          :type="uploadParams.uploadType"
          del-bg-color="#56d39d"
          :auto-upload="true"
          :file-list="uploadParams.fileList"
          @on-remove="removeImage"
          @on-uploaded="uploadSuccess"></Upload>
        </u-form-item> -->
        <u-form-item label="微信/QQ" :border-bottom="false" prop="merchant_contact_information">
          <u-input v-model="userForm.merchant_contact_information" placeholder="请输入微信/QQ号" />
        </u-form-item>
        <u-form-item label="手机号码" :border-bottom="false" prop="merchant_phone">
          <u-input v-model="userForm.merchant_phone" :disabled="merchantId > 0" placeholder="请输入手机号码" />
        </u-form-item>
        <u-form-item label="登录密码" :border-bottom="false" prop="password">
          <u-input v-model="userForm.password" type="password" placeholder="登录密码，站外使用" />
        </u-form-item>
      </u-form>
    </view>
    <!-- 提示 -->
    <!-- <view class="tip">请如实填写您的账户信息，不然打款失败后果自负。</view> -->
    <view class="sumbit-button" @click="sumbitMerchantApply">提交资料</view>
    <view class="sumbit-button2" @click="setClipboardData">复制站外登陆链接</view>
  </view>
</template>

<script>
  import { merchantApply, merchantInfoByUserId } from '@/api/applet';
  import { mapGetters } from 'vuex';
  import Upload from '@/components/upload/upload';
  import config from '@/utils/config';
  export default {
    components: {
      Upload
    },
    data() {
      return {
        show: true,
        merchantId: 0,
        agreement: false,
        audit_status: null,
        merchantInfoData: {},
        uploadParams: {
          limitType: ['png', 'PNG', 'jpg', 'JPG', 'jpeg', 'webp'],
          maxCount: 1,
          uploadType: 'image',
          action: `${config.baseApi}/client/upload/uploadImg`,
          fileList: [],
        },
        userForm: {
          id: '',
          merchant_source_code: null, // 上级邀请口令
          merchant_phone: null, // 商家联系电话
          real_name: null, // 真实姓名
          payment: 'alipay', // 收款方式
          payment_account: null, // 提现账号
          merchant_contact_information: null, //联系微信、QQ
          payment_qrcode: null, // 收款二维码
          artworks_type: [], // 入驻类型
          password: ''
        },
        rules: {
          merchant_phone: [
            {
              min: 11,
              max: 11,
              required: true, 
              message: '请输入长度为11位的手机号码', 
              trigger: ['change', 'blur'],
            }
          ],
          real_name: [
            { 
              required: true, 
              message: '请输入您的收款真实姓名', 
              trigger: ['change', 'blur'],
            }
          ],
          payment_account: [
            { 
              required: true, 
              message: '请输入您的提现账号', 
              trigger: ['change', 'blur'],
            }
          ],
          payment_qrcode: [
            {
              required: true,
              message: '请上传收款码', 
              trigger: ['change', 'blur']
            }
          ]
        }
      }
    },
    computed: {
      ...mapGetters([
        'token',
        'userInfo',
        'version',
        'artworksTypeAllListData'
      ])
    },
    onLoad() {
      this.getMerchantInfoByUserId();
    },
    methods: {

      // 选择创作类型
      checkboxGroupChange(e) {
        this.userForm.artworks_type = e;
      },

      // 获取入驻信息
      getMerchantInfoByUserId() {
        uni.showToast({
          title: '加载中...',
          icon: 'loading',
        })
        merchantInfoByUserId().then(result => {
          uni.hideToast();
          if (result && result.data) {
            const data = result.data;
            this.merchantId = data.id;
            this.merchantInfoData = data;
            data.artworks_type = data.artworks_type ? JSON.parse(data.artworks_type) : [];
            this.userForm = {
              id: data.id,
              payment_qrcode: data.payment_qrcode,
              merchant_name: data.merchant_name, // 达人昵称
              real_name: data.real_name, // 联系方式qq/微信
              payment_account: data.payment_account, // 推广口令
              payment: data.payment ? data.payment : 'alipay', // 上级邀请口令
              merchant_phone: data.merchant_phone, // 联系电话
              merchant_contact_information: data.merchant_contact_information, // 联系方式
              payment_qrcode: data.payment_qrcode, // 联系方式
              artworks_type: data.artworks_type, // 创作者类型
            }
            if (data.payment_qrcode) {
              this.uploadParams.fileList = [{
                url: data.payment_qrcode
              }];
            }
            this.initArtworksTypeListData(data.artworks_type);
          }
        })
      },

      // 赋值选择的类型
      initArtworksTypeListData(artworksTypeList) {
        const artworksTypeAllListData = this.artworksTypeAllListData;
        artworksTypeList.forEach(item => {
          artworksTypeAllListData.forEach(listItem => {
            if (item == listItem.id) {
              listItem.checked = true;
            }
          })
        })
      },

      // 提交申请
      merchantApply(params) {
        uni.showToast({
          title: '提交中',
          icon: 'loading',
          mask: true,
        })
        merchantApply(params).then(result => {
          if (result && result.code === 200) {
            uni.showToast({
              title: '提交成功',
              icon: 'success',
              mask: true
            })
            setTimeout(() => {
              uni.switchTab({ url: '/pages/mine/index' })
            }, 1000)
          }
        })
      },

      // 提交申请
      sumbitMerchantApply() {
        this.$refs.uForm.validate(valid => {
          if (valid) {
            if (!/^1[23456789]\d{9}$/.test(this.userForm.merchant_phone)) {
              uni.showToast({
                title: '手机号码电话格式错误',
                icon: 'none',
              });
              return;
            }
            this.merchantApply(this.userForm);
          } else {
            console.log('验证失败');
          }
        });
      },

      // 上传成功
      uploadSuccess(data) {
        let payment_qrcode = '';
        data.forEach(item => {
          payment_qrcode = item.response.data.cover_path
          return;
        })
        this.userForm.payment_qrcode = payment_qrcode;
      },

      // 删除图片
      removeImage() {
        this.userForm.payment_qrcode = '';
      },

      // 设置复制
      setClipboardData() {
        const businessId = uni.getStorageSync('businessId');
        let text = `http://${location.host}?id=${businessId}`;
        uni.setClipboardData({
          data: text,
          success: function () {
            uni.showToast({
              title: '复制成功',
              icon: 'none',
              mask: false
            })
          }
        });
      },
    },
    onReady() {
      this.$refs.uForm.setRules(this.rules);
    }
  }
</script>

<style lang="scss">
  page{
    background-color: #f8f8f8;
  }

  .merchant-container{
    padding: 24rpx;

    .form-container{
      background-color: #fff;
      padding: 24rpx;
      .bind-title{
        font-size: 28rpx;
        text-align: center;
        color: #333;
        padding: 6rpx 0;
      }
      .bind-btn{
        background-color: $uni-color-primary;
        color: #fff;
      }
    }

    .tip{
      margin-top: 40rpx;
      font-size: 24rpx;
      color: #888;
    }

    .sumbit-button{
      background-color: $uni-color-primary;
      color: #ffff;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 40rpx;
      text-align: center;
      font-size: 32rpx;
      margin-top: 40rpx;
    }

    .sumbit-button2{
      color: $uni-color-primary;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 40rpx;
      text-align: center;
      font-size: 32rpx;
      margin-top: 40rpx;
    }

    .review-button{
      background: rgba($color: #888, $alpha: 0.6);
    }

    .success-button{
      background: rgba($color: #67c23a, $alpha: 0.6);
    }
  }
</style>
